<template>
  <div>
    <div class="m-alarm">
      <p style="padding-top: 10px; color: gray; font-size: 12px">
        当前运营报警
      </p>
      <div v-if="loading">
        <van-row v-for="(item, index) in result" :key="index">
          <van-col span="18">{{  item.item }}</van-col>
          <van-col span="6">
            <van-tag v-if="alarmStatus(item.id)" type="success">已解决</van-tag>
            <van-tag v-else type="warning">未解决</van-tag>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-button class="m-add" type="primary" block @click="updataAlarm">提交变更</van-button>
    <div>
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            :key="index"
            :title="item.item"
          >
            <!-- clickable @click="toggle(index)" -->
            <template #right-icon>
              <van-checkbox ref="checkboxes" :name="item" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-popup v-model="show" style="width: 96%" @close="popupClose">
        <van-field
          v-model="text"
          label="说明"
          label-width="30px"
          style="width: 100%"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CheckboxGroup from 'vant/lib/checkbox-group'
import 'vant/lib/checkbox-group/style'
import CellGroup from 'vant/lib/cell-group'
import 'vant/lib/cell-group/style'
import Cell from 'vant/lib/cell'
import 'vant/lib/cell/style'
import Checkbox from 'vant/lib/checkbox'
import 'vant/lib/checkbox/style'
import Field from 'vant/lib/field'
import 'vant/lib/field/style'
import Popup from 'vant/lib/popup'
import 'vant/lib/popup/style'
import { getAlarms } from '@/api/txs'
import { getSalon, updateAlarm } from '@/api/txs'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import Notify from 'vant/lib/notify'
import 'vant/lib/notify/style'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Tag from 'vant/lib/tag'
import 'vant/lib/tag/style'

export default {
  // filters: {
  //   filter(val) {
  //     console.log(this.lstStatus);
  //     // return this.lstStatus.includes(val + 10000)
  //   }
  // },
  components: {
    [Tag.name]: Tag,
    [Row.name]: Row,
    [Col.name]: Col,
    [Notify.name]: Notify,
    [Button.name]: Button,
    [CheckboxGroup.name]: CheckboxGroup,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Checkbox.name]: Checkbox,
    [Field.name]: Field,
    [Popup.name]: Popup
  },
  data () {
    return {
      loading: false,
      salon: {},
      show: false,
      text: '',
      // list: ['有股东不配合', '有员工不配合','驾驭不了团队',
      //   '管家成交能力弱','缺资金','客流量少','客户质量低','库存不足','医生无法及时到位','医生技术不足',
      //   '服务质量不足','留不住客','客情能力弱','老客运营差','人手不够','自身能力不足'],
      list: [],
      result: [],
      currentIndex: 0,
      lstStatus: []
    }
  },
  computed: {
    ...mapGetters(['openId'])
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      getAlarms().then(res => {
        this.list = res.data.data
        getSalon(this.openId).then(res => {
          this.salon = res.data.data
          if (this.salon.alarm && this.salon.alarm.length > 0) {
            this.lstStatus = this.salon.alarm.split(';').map(Number)
            this.lstStatus.forEach(idx => {
              this.result.push(this.list.find(a => a.id === idx % 10000))
            })
            this.loading = true
          }
        })
      })
      // this.list = this.list.map(s => {
      //   return {
      //     id: s.id,
      //     item: s.item,
      //     note: ''
      //   }
      // })
    },
    toggle (index) {
      // this.currentIndex = index
      // this.text = this.list[index].note
      // this.show = true
      this.$refs.checkboxes[index].toggle()
    },
    popupClose () {
      this.list[this.currentIndex].note = this.text
    },
    updataAlarm() {
      if(this.salon.id) {
        this.salon.alarm = this.result.map(r=> this.lstStatus.includes(r.id + 10000) ? r.id + 10000 : r.id).join(';')
        updateAlarm(this.salon.id, this.salon.alarm).then(_ => {
          Notify({ type: 'success', message: '提交成功' })
        })
      }
    },
    alarmStatus(val) {
      return this.lstStatus.includes(val + 10000)
    }
  }
}
</script>

<style lang="scss" scoped>
.m-alarm {
  background-color: #fff;
  color: #1989fa;
  font-size: 30px;
  // line-height: 40px;
  text-align: center;
  box-shadow: 0px 0px 10px rgb(201, 201, 201);
  margin-top: -40px;
  margin-bottom: -15px;
  padding-bottom: 10px;
}
</style>
